<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="./css/indexCss.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/Jquery.min.js"></script>
</head>
<body>
<header>
    <div class="top">
        <div class="m-head">
            <img class="m-logo" data-lazy-src="./image/login.png">
            <ul class="m-nav">
                <li style="background-color: black"><a href="#">发现音乐</a></li>
                <li><a href="#">我的音乐</a></li>
                <li><a href="#">关注</a></li>
                <li><a href="#">商城</a></li>
                <li><a href="#">音乐人</a></li>
                <li><a href="#">云推歌</a></li>
                <li><a href="#">下载客户端</a></li>
            </ul>
            <div class="m-search">
        <span class="parent">
            <input type="text" id="search">
            <label id="unsea">音乐/视频/电台/用户</label>
        </span>
            </div>
            <a class="m-nav-a" href="#">
                <span>创作者中心</span>
            </a>
            <div class="m-login">
                <a class="login" href="login.html">登录</a>
            </div>
        </div>

        <div class="n-head">
            <ul class="n-nav">
                <li><a href="#" style="background-color: #9B0909">推荐</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">歌单</a></li>
                <li><a href="#">主播电台</a></li>
                <li><a href="#">歌手</a></li>
                <li><a href="#">新碟上架</a></li>
            </ul>
        </div>
    </div>
</header>
<!---------------------------------------------------->
<!--轮播图-->
<div class="ban">
    <div class="ban-img">
        <ul>
            <li><a href="#"><img data-lazy-src="./image/ban/1.jpg"></a></li>
            <li><a href="#"><img data-lazy-src="./image/ban/2.jpg"></a></li>
            <li><a href="#"><img data-lazy-src="./image/ban/3.jpg"></a></li>
            <li><a href="#"><img data-lazy-src="./image/ban/4.jpg"></a></li>
            <li><a href="#"><img data-lazy-src="./image/ban/5.jpg"></a></li>
            <li><a href="#"><img data-lazy-src="./image/ban/6.jpg"></a></li>
        </ul>
    </div>
    <div class="left-p"><a class="left iconfont" href="javascript:;">&#xe667;</a></div>
    <div class="right-p"><a class="right iconfont" href="javascript:;">&#xe666;</a></div>
    <div class="b-under">
        <div class="center">

        </div>
    </div>
</div>
<!--body部分-->
<div class="g-body">


    <div class="g-left">
        <div class="hot">
            <div class="h-t"></div>
            <h2><a href="#">热门推荐</a></h2>
            <div class="h-ul">
                <a href="#">华语</a>
                <span>|</span>
                <a href="#">流行</a>
                <span>|</span>
                <a href="#">摇滚</a>
                <span>|</span>
                <a href="#">民谣</a>
                <span>|</span>
                <a href="#">电子</a>
                <span>|</span>
            </div>
        </div>

        <div class="h-music">
            <ul>
                <li>
                    <div class="l-img">
                        <a href="#"><img data-lazy-src="./image/index-body.jpg"></a>
                        <div class="img-bottm">
                            <a></a>
                            <span class="img-span"></span>
                            <span class="count">3677万</span>
                        </div>
                    </div>
                    <div class="l-bottm">
                        <span><a title="这节奏，听着就想跳舞！" href="#">这节奏，听着就想跳舞！</a></span>
                    </div>
                </li>
                <li>
                    <div class="l-img">
                        <a href="#"><img data-lazy-src="./image/index-body.jpg"></a>
                        <div class="img-bottm">
                            <a></a>
                            <span class="img-span"></span>
                            <span class="count">3677万</span>
                        </div>
                    </div>
                    <div class="l-bottm">
                        <span><a title="这节奏，听着就想跳舞！" href="#">这节奏，听着就想跳舞！</a></span>
                    </div>
                </li>
                <li>
                    <div class="l-img">
                        <a href="#"><img data-lazy-src="./image/index-body.jpg"></a>
                        <div class="img-bottm">
                            <a></a>
                            <span class="img-span"></span>
                            <span class="count">3677万</span>
                        </div>
                    </div>
                    <div class="l-bottm">
                        <span><a title="这节奏，听着就想跳舞！" href="#">这节奏，听着就想跳舞！</a></span>
                    </div>
                </li>
                <li>
                    <div class="l-img">
                        <a href="#"><img data-lazy-src="./image/index-body.jpg"></a>
                        <div class="img-bottm">
                            <a></a>
                            <span class="img-span"></span>
                            <span class="count">3677万</span>
                        </div>
                    </div>
                    <div class="l-bottm">
                        <span><a title="这节奏，听着就想跳舞！" href="#">这节奏，听着就想跳舞！</a></span>
                    </div>
                </li>
                <li>
                    <div class="l-img">
                        <a href="#"><img data-lazy-src="./image/index-body.jpg"></a>
                        <div class="img-bottm">
                            <a></a>
                            <span class="img-span"></span>
                            <span class="count">3677万</span>
                        </div>
                    </div>
                    <div class="l-bottm">
                        <span><a title="这节奏，听着就想跳舞！" href="#">这节奏，听着就想跳舞！</a></span>
                    </div>
                </li>
                <li>
                    <div class="l-img">
                        <a href="#"><img data-lazy-src="./image/index-body.jpg"></a>
                        <div class="img-bottm">
                            <a></a>
                            <span class="img-span"></span>
                            <span class="count">3677万</span>
                        </div>
                    </div>
                    <div class="l-bottm">
                        <span><a title="这节奏，听着就想跳舞！" href="#">这节奏，听着就想跳舞！</a></span>
                    </div>
                </li>
                <li>
                    <div class="l-img">
                        <a href="#"><img data-lazy-src="./image/index-body.jpg"></a>
                        <div class="img-bottm">
                            <a></a>
                            <span class="img-span"></span>
                            <span class="count">3677万</span>
                        </div>
                    </div>
                    <div class="l-bottm">
                        <span><a title="这节奏，听着就想跳舞！" href="#">这节奏，听着就想跳舞！</a></span>
                    </div>
                </li>
                <li>
                    <div class="l-img">
                        <a href="#"><img data-lazy-src="./image/index-body.jpg"></a>
                        <div class="img-bottm">
                            <a></a>
                            <span class="img-span"></span>
                            <span class="count">3677万</span>
                        </div>
                    </div>
                    <div class="l-bottm">
                        <span><a title="这节奏，听着就想跳舞！" href="#">这节奏，听着就想跳舞！</a></span>
                    </div>
                </li>
            </ul>
        </div>

        <div class="new-music">
            <div class="h-t"></div>
            <h2><a href="#">新碟上架</a></h2>
        </div>

        <div class="new-ul">
            <ul>
                <li>
                    <div class="new-imgp">
                        <img data-lazy-src="image/new.jpg" title="超然歌曲，一起来hi！">
                        <a href="#" title="超然歌曲，一起来hi！"></a>
                        <a href="javascript:;" class="iconfont new-icon-a">&#xe697;</a>
                    </div>
                    <p><a href="#">我也想偶尔被需要</a></p>
                    <p><a class="new-sm" href="#">thank you 思余</a></p>
                </li>
                <li>
                    <div class="new-imgp">
                        <img data-lazy-src="image/new.jpg" title="超然歌曲，一起来hi！">
                        <a href="#" title="超然歌曲，一起来hi！"></a>
                        <a href="javascript:;" class="iconfont new-icon-a">&#xe697;</a>
                    </div>
                    <p><a href="#">我也想偶尔被需要</a></p>
                    <p><a class="new-sm" href="#">thank you 思余</a></p>
                </li>
                <li>
                    <div class="new-imgp">
                        <img data-lazy-src="image/new.jpg" title="超然歌曲，一起来hi！">
                        <a href="#" title="超然歌曲，一起来hi！"></a>
                        <a href="javascript:;" class="iconfont new-icon-a">&#xe697;</a>
                    </div>
                    <p><a href="#">我也想偶尔被需要</a></p>
                    <p><a class="new-sm" href="#">thank you 思余</a></p>
                </li>
                <li>
                    <div class="new-imgp">
                        <img data-lazy-src="image/new.jpg" title="超然歌曲，一起来hi！">
                        <a href="#" title="超然歌曲，一起来hi！"></a>
                        <a href="javascript:;" class="iconfont new-icon-a">&#xe697;</a>
                    </div>
                    <p><a href="#">我也想偶尔被需要</a></p>
                    <p><a class="new-sm" href="#">thank you 思余</a></p>
                </li>
            </ul>
            <div class="left-icon iconfont"><a href="javascript:;">&#xe667;</a></div>
            <div class="right-icon iconfont"><a href="javascript:;">&#xe666;</a></div>
        </div>

        <div class="h-list">
            <div class="h-t"></div>
            <h2><a href="#">榜单</a></h2>
        </div>

        <div class="list-music">
            <dl>
                <dt>
                    <div class="list-top1">
                        <a href="javascript:;"><img src="./image/index/upupup.jpg"> </a>
                        <div class="tit">
                            <a href="#"><h3>热飙榜</h3></a>
                            <div class="tit-under">
                                <a href="javascript:;" class="iconfont">&#xe697;</a>
                                <a href="javascript:;" class="iconfont">&#xe6b7;</a>
                            </div>
                        </div>
                    </div>
                </dt>
                <dd>
                    <ol class="musicList">

                    </ol>
                </dd>
            </dl>
            <dl>
                <dt>
                    <div class="list-top1">
                        <a href="javascript:;"><img data-lazy-src="./image/index/new.jpg"> </a>
                        <div class="tit">
                            <a href="#"><h3>新歌榜</h3></a>
                            <div class="tit-under">
                                <a href="javascript:;" class="iconfont">&#xe697;</a>
                                <a href="javascript:;" class="iconfont">&#xe6b7;</a>
                            </div>
                        </div>
                    </div>
                </dt>
                <dd>
                    <ol>

                    </ol>
                </dd>
            </dl>
            <dl>
                <dt>
                    <div class="list-top1">
                        <a href="javascript:;"><img data-lazy-src="./image/index/myself.jpg"> </a>
                        <div class="tit">
                            <a href="#"><h3>原创榜</h3></a>
                            <div class="tit-under">
                                <a href="javascript:;" class="iconfont">&#xe697;</a>
                                <a href="javascript:;" class="iconfont">&#xe6b7;</a>
                            </div>
                        </div>
                    </div>
                </dt>
                <dd>
                    <ol>

                    </ol>
                </dd>
            </dl>
        </div>

    </div>
    <div class="g-right">

    </div>


</div>
<!--footer部分-->
<footer>
    <div class="callme">联系我们</div>
    <span class="thank">感谢你的支持，如有问题请继续保留</span>
    <div class="phone">
        <span>位置：重庆大学</span>
        <span>QQ：1820633863</span>
        <span>联系电话：19838785916</span>
        <span>电子邮箱：1820633863@qq.com</span>
    </div>
    <img src="image/weixin.jpg" class="weixin">
</footer>
<!------------------------------------------------------------>

<script src="js/Myaxios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./js/moveban.js"></script>
<script src="js/EasyLazyload.js"></script>
<script src="js/indexJs.js"></script>
<script>
    lazyLoadInit({
        // coverColor:"white",
        // coverDiv:"<h1>test</h1>",
        // offsetBottom:0,
        // offsetTopm:0,
        showTime: 500,
        onLoadBackEnd: function (i, e) {
            console.log("onLoadBackEnd:" + i);
        }
        , onLoadBackStart: function (i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>
</body>
</html>